<template>
    <div class="row">
        <left-title :title="top.title" :desc="top.desc"></left-title>
        <div class="col-sm-12 clearfix nav-list-div">
            <ul class="nav-list type-list pull-left" id="page-content" v-show="typeList.length">
                <li v-for="item in typeList"
                    :key="item.type_id">
                    <router-link :to="{path: '/list/'+ item.type_id, query: {page: 1}}">
                        {{ item.name }}
                    </router-link>
                </li>
            </ul>
            <div class="search pull-right">
                <form class="form-inline" method="GET" @submit.prevent="getList">
                    <div class="form-group">
                        <input type="text" name="keyword"
                               :value="keyword"
                               @input="updateKeyWord"
                               class="form-control"
                               placeholder="请求输入关键字">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <article-list class="new-blog col-sm-8" :id="$route.params.id"
                              :page="parseInt($route.query.page) || 1"></article-list>
                <right-article :link=false></right-article>
            </div>
        </div>
    </div>
</template>

<script>
    import LeftTitle from './common/LeftTitle'
    import RightArticle from './common/RightArticle'
    import ArticleList from './common/ArticleList'
    import {mapState, mapActions, mapMutations} from 'vuex'

    export default {
        components: {
            LeftTitle,
            RightArticle,
            ArticleList
        },
        data() {
            return {
                title: "最新文章",
                top: {
                    title: "学无止境",
                    desc: "不要轻易放弃。学习成长的路上，我们长路漫漫，只因学无止境。"
                },
            }
        },
        name: "List",
        methods: {
            ...mapActions("list", ["getList", "getArticleTypes"]),
            ...mapMutations("list", [
                "searchKeyWord",
                "setTypeId",
                "setPage"
            ]),
            updateKeyWord(e) {
                this.searchKeyWord(e.target.value);
            }
        },
        created() {
            this.setTypeId(this.$route.params.id);
            this.setPage(1);
            this.getArticleTypes()
        },

        computed: mapState('list', {
            typeList: 'typeItems',
            keyword: 'keyword',
        })
    }
</script>

<style lang="scss" scoped>
    .nav-list-div {
        margin: 15px auto 20px auto;
        box-sizing: border-box;
        padding-left: 0;
        ul.type-list {
            padding-left: 0;
            box-sizing: content-box;
            margin-bottom: 0;
            li {
                float: left;
                box-sizing: content-box;
                transition: 800ms ease all;
                display: block;
                a {
                    display: block;
                    line-height: 30px;
                    height: 30px;
                    box-sizing: content-box;
                    overflow: hidden;
                    margin: 0 10px;
                    text-align: center;
                    padding: 5px 15px;
                    background: white;
                    position: relative;
                    &.active {
                        background: #333;
                        color: #fff;
                        text-decoration: none;
                    }
                    &:first-child {
                        margin-left: 0;
                    }
                    &:before, &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 0;
                        height: 2px;
                        width: 0;
                        background: #333;
                        transition: 400ms ease all;
                    }
                    &:after {
                        right: inherit;
                        top: inherit;
                        left: 0;
                        bottom: 0;
                    }
                    &:hover:before, &:hover:after {
                        width: 100%;
                        transition: 800ms ease all;
                    }
                }
            }
        }
    }
</style>